<template>
	<view class="">
		<!-- 选项卡 -->
		<view class="f-domain" v-if="load"	>
			<view class="tab">
				<v-tabs    v-model="activeTab" :scroll="true" height="94rpx"
								:tabs="tabs"  @change="changeTab"	activeColor="#0068ff" lineColor="#0068ff" lineHeight="3px"/>
			</view>
		</view>
		<view class="content">
			
			<view class="upload-area">
				
				<!-- 上传圈子Logo -->
				<view class="logo-area" @tap="chooseLogo" >
					<view class="solids" v-if="logo.length == 0">
						<image src="/static/images/circle/up-icon.svg" mode="aspectFill"></image>
						<view class="unload-desc">上传圈子logo</view>
					</view>
					<view class="logo" v-if="logo.length">
						<view class="pic"><image :src="logo" mode="aspectFill"></image></view>
						<view class="desc">圈子logo</view>
					</view>
				</view>
				
				<!-- 上传封面cover -->
				<view class="cover-area" @tap="chooseCover">
					<view class="solids"  v-if="cover.length == 0">
						<image src="/static/images/circle/up-icon.svg" mode="aspectFill"></image>
						<view class="unload-desc">上传封面</view>
					</view>
					<view class="logo"  v-if="cover.length">
						<view class="pic"><image :src="cover" mode="aspectFill"></image></view>
						<view class="desc">圈子封面</view>
					</view>
				</view>
				
			</view>
			
			<form @submit.stop="formSubmit" @reset="">
				<input type="text" hidden=true name="cateid" :value="cateid" />
				<input type="text" hidden=true name="ispublic" :value="ispublic" />
				<input type="text" hidden=true name="cover" :value="cover" />
				<input type="text" hidden=true name="logo" :value="logo" />
				<view class="cir-name">
					<view class="desc">圈子名称</view>
					<view class="name">
						<input type="text" name="cirname" :value="cirname" placeholder="请输入圈子名称" class="cirname" maxlength="15"/>
						<radio-group @click="togglechecked" class="priv">
							<label  class="radio"><radio name="flag" :value="flag" :checked="flag" />私有</label>
						</radio-group>
					</view>
					
				</view>
				
				<view class="intro">
					<view class="cir-desc">圈子简介</view>
					<textarea placeholder="请输入本圈简介~" class="cir-textarea" cols="30" rows="30" maxlength="120"  name="intro"  v-model="intro">
					</textarea>
					<view class="count">
						<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{remnant}}</p>
						<view class="">/120</view>
					</view>
				</view>
				
				<button class="create" form-type="submit">创建</button>
				
			</form>
			
		</view>
		
		
	</view>
</template>
	
<script>
	import graceChecker from '../../../common/graceChecker.js'
	import api from '../../../common/api.js'
	
	export default {
		data() {
			return {
				upload_api: this.uploadApi, 
				tabs:[],			//圈子类别数据
				load:0,				//判断圈子类别是否请求成功
				activeTab:'',	//选择圈子类别
				cateid:null,	//圈子所属类别
				cirname:'',		//圈子名称
				intro:'',			//圈子简介
				logo:[],			//圈子logo	
				cover:[],			//圈子封面
				flag:false,		//记录创建圈子是否公开
				ispublic:0,		//是否公开
				repost:1  		//重复提交
			}
		},
		
		computed: {
			remnant() {//实时记录输入字数
				return  this.intro.length;
			}
		},
		
		async onLoad(p) {
			console.log(p); 
			p.activeTab == 0 || p.activeTab == 1 || p.activeTab == 2 ? this.activeTab = p.activeTab : this.activeTab = p.activeTab -3
			await this.getCategories()
		},
		
		methods: {
			
			async formSubmit(e) {//表单提交--创建圈子
				if(!this.repost) {
					uni.showToast({ title: '请勿重复提交 ', icon: "none" });
					return 
				}
				var rule = [
					{name:"cateid", checkType : "int", checkRule:"0,", errorMsg:"请选择圈子分类"},
					{name:"cirname", checkType : "notnull", errorMsg:"圈子名不能为空"},
					{name:"logo", checkType : "notnull", errorMsg:"请上传圈子logo"},
					{name:"cover", checkType : "notnull", errorMsg:"请上传圈子封面"},
					{name:"intro", checkType : "notnull", errorMsg:"请输入圈子简介"},
					
				];
				//进行表单检查
				var checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				this.repost = 0 
				uni.showLoading({
					title:'提交中'
				});
				var {cateid,cirname,intro,logo,cover,ispublic} = e.detail.value
				console.log(e.detail.value);
				// var res = await this.createCir(cateid,cirname,intro,logo,cover,ispublic)
				let cres = await api.CreateCir(cateid,cirname,intro,logo,cover,ispublic)
				console.log(cres);
				if(cres.err == 1) {
					uni.hideLoading()
					uni.showToast({
						title:cres.msg,
						icon:'none'
					})
					this.repost = 1
				}else {
					uni.hideLoading()
					uni.showToast({
						title:cres.msg,
						duration:800
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},1000)
					
				}
				
			},
					
			togglechecked() {//切换私密圈子
				this.flag = !this.flag
				if(this.flag) {
					this.ispublic = 1
				}else {
					this.ispublic = 0
				}
			},
			
			async createCir(category_id,cirname,intro,logo,cover,priv) {//创建圈子
				let cres = await api.CreateCir(category_id,cirname,intro,logo,cover,priv)
				console.log(cres);
				if(cres.err == 1) {
					uni.showToast({
						title:cres.msg,
						icon:'none',
						duration:700
					})
				}
			},
			
			async getCategories() {//获取圈子分类
				this.load = 0
				this.cateList = await api.GetCategories()
				this.tabs = this.cateList.map(item => {return {id: item.id, name: item.name}})
				this.cateid = this.tabs[this.activeTab].id
				this.load = 1
			},
			
			changeTab(e) {//切换选中分类
				this.activeTab = e
				this.cateid = this.tabs[this.activeTab].id
			},
			
			chooseLogo() {//上传圈子logo
					var _self = this
					uni.chooseImage({
						count: 1 ,//默认1
						sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有 'original', 'compressed'
						sourceType: ['album','camera'], //从相册选择 或者 拍照
						success: (res) => {
							res.tempFilePaths.forEach((item,index)=>{
								uni.showLoading({title:"上传中"});
								var uploadTask = uni.uploadFile({
									url: _self.upload_api,
									// url:'http://bbtest.test/api/upload',
									filePath: item,
									fileType: 'image',
									name: 'file',
									dataType: 'json',
									success: function (uploadFileRes) {
										// 上传成功后返回服务器端保存的路径
										var jsondata = JSON.parse(uploadFileRes.data)
										if( jsondata.err ==0 ){
											_self.logo = []
											_self.logo.push(jsondata.file_path)
											uni.hideLoading();
											uni.showToast({
												title: jsondata.msg,
												duration:800
											})
										}else{
											uni.showToast({
												title:jsondata.msg,
												icon:'none'
											})
										}
										// api.SetAvatar(jsondata.file_path)
										_self.logo = jsondata.file_path
										}
								 });
							})
						}
					});
			},
			
			chooseCover() {//上传圈子Cover
				var _self = this
				uni.chooseImage({
					count: 1 ,//默认1
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有 'original', 'compressed'
					sourceType: ['album','camera'], //从相册选择 'album','camera'
					success: (res) => {
						res.tempFilePaths.forEach((item,index)=>{
							uni.showLoading({title:"上传中"});
							var uploadTask = uni.uploadFile({
								url: _self.upload_api,
								// url:'http://bbtest.test/api/upload',
								filePath: item,
								fileType: 'image',
								name: 'file',
								dataType: 'json',
								success: function (uploadFileRes) {
									// 上传成功后返回服务器端保存的路径
									var jsondata1 = JSON.parse(uploadFileRes.data)
									if( jsondata1.err ==0 ){
										_self.cover = []
										_self.cover.push(jsondata1.file_path)
										uni.hideLoading();
										uni.showToast({
											title: jsondata1.msg,
											duration:800
										})
									}else{
										uni.showToast({
											title:jsondata1.msg,
											icon:'none'
										})
									}
									// api.SetAvatar(jsondata.file_path)
									_self.cover = jsondata1.file_path
									}
							 });
						})
					}
				});
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.f-domain {
	top: 0;
	height: 88rpx;
	z-index: 99;
	background-color: #ffffff;
}
.tab {
	// border-bottom: 8rpx solid #f6f6f6;
	position: fixed;
	width: 100%;
	font-size: 32rpx;
	background:#fff;
	border-bottom: 4rpx solid #F3F6F5;
}
.content {
	background-color: #fff;
	// margin-top: 100rpx;
	padding: 20rpx 30rpx;
	.upload-area {
		display: flex;
		justify-content: space-evenly;
		height: 200rpx;
		background-color: #fff;
		.logo-area,.cover-area {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 345rpx;
			.solids ,.logo{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				image {
					width: 70rpx;
					height: 60rpx;
				}
				.pic {
					width: 120rpx;
					height: 100rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
				}
			}
			.unload-desc,.desc
			{
				margin-top: 8rpx;
				font-size: 24rpx;
			}
		}
	}
	.cir-name {
		font-size: 30rpx;
		padding: 0 8rpx;
		.desc {
			padding: 0 8rpx;
			margin-right: 8rpx;
		}
		.name {
			display: flex;
			height: 70rpx;
			align-items: center;
			margin: 20rpx 0;
			font-size: 30rpx;
			color: 999;
			.cirname {
				flex: 1;
				height: 60rpx;
				padding: 8rpx 20rpx;
			}
			input {
				border: 2rpx solid #F3F6F5;
				margin: 10rpx 0;
				background: rgba(246,247,249,0.5);
				border-radius: 15rpx;
			}
			.priv {
				padding: 10rpx;
			}
			radio {
				transform:scale(0.75);
			}
		}
	}
	.create {
		width: 600rpx;
		background-color: #0068ff;
		color: #fff;
	}
	.intro {
		position: relative;
		
		// margin: 20rpx 0 20rpx ;
		.cir-desc {
			padding: 0 8rpx;
		}
		margin: 50rpx 0 80rpx;
		font-size: 30rpx;
		background-color: #fff;
		.cir-textarea {
			border: 2rpx solid #F3F6F5;
			margin: 10rpx 0;
			background: rgba(246,247,249,0.5);
			border-radius: 15rpx;
			line-height: 34rpx;
		}
		.count {
			display: flex;
			position: absolute;
			color: #999;
			right: 24rpx;
			bottom: 10rpx;
			.remnant {
				color: #999;
			}
			.zero{
				color: #FF0000;
			}
		}
		textarea {
			height: 250rpx;
			width: 630rpx;
			padding: 20rpx;
			font-size: 28rpx;
		}
	}
}

</style>
